<script setup>
import { ref, reactive } from 'vue'
import {
    ListSetting,
    AddSetting,
    EditSetting,
    DelSetting,
    Superior
} from '@/api/phoneBill/settings.js'
const loading = ref(false)
const formRef = ref(null)
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance();

// #region
// 弹出框
const dialogVisible = ref(false)
// 查看
const tableData = ref([])
const tableDataA = ref([]) //上级
const shopFlag = ref('移动')
const getTableData = async () => {
    loading.value = true
    await Superior({ pageNum: 1, pageSize: 100, dictType: 'recharge_super_name' }).then(res => {
        tableDataA.value = res.rows
    })
    await ListSetting({
        operator: shopFlag.value
    })
        .then(res => {
            loading.value = false
            tableData.value = res.rows
        })
        .catch(() => {
            tableData.value = []
        })
}

getTableData()

const handleClick = tab => {
    if (tab.paneName == 'one') {
        shopFlag.value = '移动'
    }
    if (tab.paneName == 'two') {
        shopFlag.value = '电信'
    }
    if (tab.paneName == 'three') {
        shopFlag.value = '联通'
    }
    if (tab.paneName == 'four') {
        shopFlag.value = '广电'
    }


    getTableData()
}
const dialogTitile = ref('')
const formData = reactive({
    id: '',
    fee: '',
    real: '',
    operator: "",
    goodsCode: '',
    superName: '',
})
const handleUpdate = row => {
    dialogVisible.value = true
    formData.id = row.id
    formData.fee = row.fee
    formData.real = row.real
    formData.operator = row.operator
    formData.superName = row.superName
    formData.goodsCode = row.goodsCode
    dialogTitile.value = '修改话费配置'
}
const handleAdd = () => {
    resetForm()
    dialogVisible.value = true
    formData.id = undefined
    dialogTitile.value = '新增话费配置'
}
// 改弹出框验证
const formRules = reactive({
    superName: [{ required: true, trigger: 'blur', message: '请选择上级' }],
    real: [{ required: true, trigger: 'blur', message: '请输入实际金额' }],
    fee: [{ required: true, trigger: 'blur', message: '请输入充值金额' }],
    operator: [{ required: true, trigger: 'blur', message: '请选择运营商' }],
})
const handleCreate = () => {
    formRef.value?.validate(valid => {
        if (valid) {
            if (formData.id) {
                EditSetting({
                    id: formData.id,
                    fee: Number(formData.fee),
                    real: formData.real,
                    superName: formData.superName,
                    operator: formData.operator,
                    goodsCode: formData.goodsCode
                }).then(() => {
                    ElMessage.success('修改成功')
                    dialogVisible.value = false
                    getTableData()
                })
            } else {
                AddSetting({
                    fee: Number(formData.fee),
                    real: formData.real,
                    superName: formData.superName,
                    operator: formData.operator,
                    goodsCode: formData.goodsCode
                }).then(() => {
                    ElMessage.success('修改成功')
                    dialogVisible.value = false
                    getTableData()
                })
            }

            dialogVisible.value = false
        } else {
            return false
        }
    })
}

/** 删除按钮操作 */
function handleDelete(row) {
    const ids = row.id;
    proxy.$modal
        .confirm('是否确认删除编号为"' + ids + '"的数据项？')
        .then(function () {
            return DelSetting(ids);
        })
        .then(() => {
            getTableData();
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
}

// ** 清除规则报错信息
const clearValidate = () => {
    formRef.value?.clearValidate()
}
const resetForm = () => {
    clearValidate()
    // 清空reactive对象里面的key值
    Object.keys(formData).map(key => {
        delete formData[key]
    })
}
// #endregion
const activeName = ref('one')

</script>

<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>

        <el-card v-loading="loading" shadow="never">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="移动" name="one" />
                <el-tab-pane label="电信" name="two" />
                <el-tab-pane label="联通" name="three" />
                <el-tab-pane label="广电" name="four" />
                <!-- <el-tab-pane label="河南电信" name="four" /> -->
            </el-tabs>
            <div class="table-wrapper">
                <el-table :data="tableData">
                    <el-table-column prop="fee" label="充值金额" align="center" />
                    <el-table-column prop="real" label="实际金额" align="center" />
                    <el-table-column prop="superName" label="上级名称" align="center" />
                    <el-table-column prop="goodsCode" label="产品编码" align="center" />
                    <el-table-column fixed="right" label="操作" width="150" align="center">
                        <template #default="scope">
                            <el-button type="primary" text bg size="small"
                                @click="handleUpdate(scope.row)">修改</el-button>
                            <el-tooltip content="删除" placement="top">
                                <el-button link type="error" icon="Delete" @click="handleDelete(scope.row)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <!-- 修改 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitile" @close="resetForm" width="30%">
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
                <el-form-item prop="fee" label="充值金额">
                    <el-input v-model="formData.fee" placeholder="请输入实际金额" />
                </el-form-item>
                <el-form-item prop="real" label="实际金额">
                    <el-input v-model="formData.real" placeholder="请输入实际金额" />
                </el-form-item>
                <el-form-item prop="operator" label="运营商">
                    <el-select v-model="formData.operator" clearable placeholder="请选择" style="width: 240px">
                        <el-option key="1" :label="移动" value="移动" />
                        <el-option key="2" :label="电信" value="电信" />
                        <el-option key="3" :label="联通" value="联通" />
                        <el-option key="3" :label="广电" value="广电" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="superName" label="上级">
                    <el-select v-model="formData.superName" clearable placeholder="请选择上级账号" style="width: 240px">
                        <el-option v-for="item in tableDataA" :key="item.dictValue" :label="item.dictLabel"
                            :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品编码">
                    <el-input v-model="formData.goodsCode" placeholder="请输入产品编码" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleCreate">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.search-wrapper {
    margin-bottom: 20px;

    :deep(.el-card__body) {
        padding-bottom: 2px;
    }
}

.table-wrapper {
    margin-bottom: 20px;
}
</style>
